<template>
	<view class="container mt-1">
		<u-top-tips ref="uTips"></u-top-tips>
		<!-- <view class="form-group">
			<label>姓名</label>
			<input type="text" class="form-control input-sm" placeholder="请输入姓名" />
		</view>
		<button class="btn btn-block btn-success">按钮</button>
		<button class="btn btn-block btn-primary">按钮</button>
		<button class="btn btn-block btn-info">按钮</button>
		<button class="btn btn-block btn-warning">按钮</button>
		<button class="btn btn-block btn-danger">按钮</button>
		<button class="btn btn-block btn-light">按钮</button>
		<button class="btn btn-block btn-secondary">按钮</button>
		<button class="btn btn-block btn-dark">按钮</button>
		<button class="btn btn-block">按钮</button> -->
		<!-- <u-icon name="phone" class=" fa-spin-1"></u-icon>
		<text class="glyphicon glyphicon-phone fa-spin-1"></text> -->
		<!-- uview 有用的组件 -->
		<!-- 加载更多、搜索、空页面【在列表页面演示】、阅读更多、滚动通知、显示几行就省略、键盘（数字、身份证号、车牌）、时间、地点选择器、开关、单双选、折叠面板、数字输入、顶部提示、SwipeAction 滑动操作-->
		
		<u-read-more show-height="100" closeText="点击阅读更多" :toggle="true" open-text="收起来">
			<rich-text :nodes="readMore">

			</rich-text>
			<rich-text :nodes="readMore">
			
			</rich-text>
		</u-read-more>
		<u-notice-bar mode="horizontal" :is-circular="false" :list="temList.map(v=>v.head)"></u-notice-bar>
		<view class="u-line-3 mt-2">
			但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美但是据说雕刻大卫像所用的这块大理石，
		</view>
		<view class="m-2">
			<u-switch active-color="red" inactive-color="blue" v-model="checked"></u-switch>开关
		</view>
		<u-collapse head-bg-color="#f2ff64" class="mt-3">
			<u-collapse-item class="border-bottom" :title="item.head" v-for="(item, index) in temList" :key="index">
				{{item.body}}
			</u-collapse-item>
		</u-collapse>
		<img-boder src="/static/logo.png" @imgClick=imgClick></img-boder>
	</view>
</template>

<script>
	import imgBoder from '../../components/img-boder.vue';
	export default {
		components:{
			imgBoder
		},
		data() {
			return {
				temList: [{
					head: "赏识在于角度的转换",
					body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					open: true,
					disabled: true
				}, {
					head: "生活中不是缺少美，而是缺少发现美的眼睛",
					body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
					open: false,
				}, {
					head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
					body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					open: false,
				}],
				readMore: '但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美但是据说雕刻大卫像所用的这块大理石，',
				checked: true,
				options: [{
					text: '123',
					backgroundColor: 'red'
				}, {
					text: '456',
					backgroundColor: 'blue'
				}]
			}
		},
		onReady() {
			this.$refs.uTips.show({
				title: '铁马冰河入梦来'
			})
		},
		methods: {
			imgClick(res){
				console.log(res);
			}
		}
	}
</script>

<style>

</style>
